<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/sy.css" />
	</head>
	<body>
		<!-- 头部 -->
    <header>
        <div>
            <p>LOGO</p>
            <ul>
                <li><a href="sy.html" class="active1">HOME</a></li>
                <li><a href="shou-cpjs.html" >PRODUCTS</a></li>
                <li><a href="gywm.html">ABOUT US</a></li>
                <li><a href="lxwm.html">CONTACT</a></li>
            </ul>
            <p>REGISTERISING IN</p>
        </div>
    </header>
    <!--轮播-->
    <div class="box">
			<div>
				<img src="../轮胎切图/官网首页切图/轮胎_02.png">
				<p>
					Welcome to Sprider GT Longmarch Tyre Shop<br />
					Sprider GT Longmarch Tyre
				</p>
			</div>
			<div><img src="../轮胎切图/官网首页切图/轮胎_02.png"></div>
			<div><img src="../轮胎切图/官网首页切图/轮胎_02.png"></div>
			<ol>
				<li></li>
				<li></li>
				<li></li>
			</ol>
			<a href="#" id="left">&lt;</a>
			<a href="#" id="right">&gt;</a>
		</div>
		<!--内容1-->
		<div class="nr1">
			<img src="../轮胎切图/官网首页切图/轮胎_03.png" />
			<h1>ABOUT US</h1>
			<div class="tet">
				<p>awfohaidgvnaejroibjWEPIBNERhbketahnkeabnoe</p>
				<p>awfohaidgvnaejroibjWEPIBhbketahnkeabnoe</p>
				<p>awfohaIBNERhbketahnkeabnoe</p>
				<p>awfohaidgvnaejroibjWEPIBNERhbketahnkeabnoe</p>
				<p>awfohaidgvnBNERhbketahnkeabnoe</p>
				<button>MORE</button>
			</div>
		</div>
		<div class="nr2">
		<div class="lunbo">
			<ul id="uu">
			<li><img src="../轮胎切图/官网首页切图/图层4.png" /></li>
			<li><img src="../轮胎切图/官网首页切图/图层6.png" /></li>
			<li><img src="../轮胎切图/官网首页切图/图层7.png" /></li>
			<li><img src="../轮胎切图/官网首页切图/图层4.png" /></li>
			</ul>		
		</div>
		<div class="left" onclick="z()"><img src="../轮胎切图/官网首页切图/轮胎_06.png"></div>
			<div class="right" onclick="y()"><img src="../轮胎切图/官网首页切图/轮胎_08.png"></div>
		</div>
		<div class="nr3">
			<h1>AEFG ANRWJ IGBN RSDGBG</h1>
			<p>COUTER</p>
		</div>
		<div class="nr4">
			<ul>
				<li><img src="../轮胎切图/官网首页切图/轮胎_19.png"></li>
				<li><img src="../轮胎切图/官网首页切图/Microlancercopy.png"></li>
				<li><img src="../轮胎切图/官网首页切图/Microlancercopy.png"></li>
				<li><img src="../轮胎切图/官网首页切图/Microlancercopy.png"></li>
				<li><img src="../轮胎切图/官网首页切图/轮胎_17.png"></li>
			</ul>
		</div>
		<div class="nr5">
			<div class="left">
				<h1>CONEF OM</h1>
				<div class="xl">
					<img src="../轮胎切图/官网首页切图/location.png" />
					<p>egarwhgrhsdg<br>agdgrgarga</p>
				</div>
				<div class="xl">
					<img src="../轮胎切图/官网首页切图/iPhonepotrait.png" />
					<p>145838-83</p>
				</div>
				<div class="xl">
					<img src="../轮胎切图/官网首页切图/Mail.png" />
					<p>egarwhgrhsdg<br>agdgrgarga</p>
				</div>
				<div class="aa">
					<img src="../轮胎切图/官网首页切图/轮胎_24.png" />
					<img src="../轮胎切图/官网首页切图/轮胎_26.png" />
					<img src="../轮胎切图/官网首页切图/轮胎_28.png" />
					<img src="../轮胎切图/官网首页切图/轮胎_30.png" />
					<img src="../轮胎切图/官网首页切图/轮胎_32.png" />
					<img src="../轮胎切图/官网首页切图/轮胎_34.png" />
					<img src="../轮胎切图/官网首页切图/轮胎_36.png" />
					<img src="../轮胎切图/官网首页切图/轮胎_38.png" />
					<img src="../轮胎切图/官网首页切图/轮胎_40.png" />
					<img src="../轮胎切图/官网首页切图/轮胎_42.png" />
				</div>
			</div>
			<div class="right">
				<div class="tt">
					<input type="text" placeholder="Name" />
					<img src="../轮胎切图/官网首页切图/Usercopy2.png" />
				</div>
				<div class="tt">
					<input type="text" placeholder="Name" />
					<img src="../轮胎切图/官网首页切图/Mail.png" />
				</div>
				<div class="ttt">
					peregvedb....
				</div>
				<div class="xx">
					SUBMIY
				</div>
			</div>
		</div>
		<div class="foot">
			@xuelong88888国际大酒店
		</div>
	</body>
	<script>
	   //获取所需要的元素
		var box=document.getElementsByClassName("box")[0];
		var divs = box.querySelectorAll("div");
	    var lis = box.querySelectorAll("li");
	    var left=document.getElementById("left")
	    var right=document.getElementById("right")
	    //因为定位后divs第4个会显示在最上面 所以先循环一遍divs，把第一个divs给显示出来
	    for(var i=0;i<divs.length;i++){
	    	//露出第一个divs是让他结束循环
           if(i==0) continue;
          divs[i].style.display="none"
        }
	    //设置第一个小元点的初始颜色黑色
	     lis[0].style.background="orange"
	    //设置一个初始变量=0
	    var num=0;
	    
	    //这个是顺时针转的也就是点击左按钮时让他转
	    //写一个计时器
	    var t=setInterval(fun,1500)
	    //写一个函数来让计时器调用
	    function fun(){
	    	//计时器每调用一次就让那个变量加一次
	    	num++;
	    	//判断如果num>=divs的长度就让他在变为0，从新开始循环
	    	if (num >= divs.length) {
            num = 0;
            }
	    	//开始循环divs，
	    	for(var i=0;i<divs.length;i++){
	    		//当循环到当前的divs是让他隐藏
	    		divs[i].style.display = "none"
	    		//当循环到当前的圆点时让他变为原始颜色
	    		 lis[i].style.background="gainsboro"
	    	}
	    	//让其他divs显示出来
	    	 divs[num].style.display = "block"
             lis[num].style.background = "orange"
	    }
	    //把上面向左的复制下来改成减减就成了点击右按钮时执行的轮播函数了
	     function fun1(){
	    	//计时器每调用一次就让那个变量加一次
	    	num--;
	    	//判断如果num>=divs的长度就让他在变为0，从新开始循环
	    	if (num==-1) {
	    		//这里他的长度减1是因为他的下标比他的长度小1
                num =divs.length-1;
            }
	    	//开始循环divs，
	    	for(var i=0;i<divs.length;i++){
	    		//当循环到当前的divs是让他隐藏
	    		divs[i].style.display = "none"
	    		//当循环到当前的圆点时让他变为原始颜色
	    		 lis[i].style.background="gainsboro"
	    	}
	    	//让其他divs显示出来
	    	 divs[num].style.display = "block"
             lis[num].style.background = "orange"
	    }
	     //点击左按钮让他执行fun函数
	       left.onclick=function(){
	       	fun()
	       }
	      //点击右按钮让他执行fun1函数
	      right.onclick=function(){
	      	fun1()
	      }
	      //当鼠标以上box时让他清除计数器，停止轮播
	       box.onmousemove=function () {
           clearInterval(t)
          }
	       //当鼠标移开时在让他在开始执行计数器轮播
        box.onmouseout=function () {
        t=setInterval(fun,1500)
         }
	      //鼠标移到那个圆点上是显示相应的divs
	      //循环一遍lis
	      for(var i=0;i<lis.length;i++){
	      	 //把lis的下标等于他的循环变量
	      	 lis[i].index=i;
	      	 lis[i].onmousemove=function(){
	      	  for(var i=0;i<divs.length;i++){
	      	  	//当循环到当前的圆点时让他变为原始颜色
                lis[i].style.background="gainsboro";
                //当循环到当前的divs是让他隐藏
                divs[i].style.display="none"
                }
	      	  lis[this.index].style.background="orange"
	      	  divs[this.index].style.display="block"
	      	 }
	      }
	      
	     
	     
	     

	 var ul=document.getElementById("uu")
	//向右走
	function y(){
		setInterval(function(){
   	if(ul.offsetLeft>0){
 		ul.style.left=-1600+'px';
 	}
 	ul.style.left=ul.offsetLeft+3+'px'
 },10)
	}
//向左走
function z(){
	setInterval(function(){
	if(ul.offsetLeft<-1600){
		ul.style.left=0+'px';
	}
	ul.style.left=ul.offsetLeft-3+'px'

},10)
}


	     
	</script>
</html>
